<template>
  <div :class="cardObj?'active_card':'no_active'">
    <img v-if="cardObj" :src="cardObj.src" alt="" />
    <div v-if="cardObj" class="_card_xx">{{$t("starBegin")}}{{cardObj.level}}{{$t("star")}}</div>
    <div v-if="cardObj" class="_card_zl">{{$t("power")}}{{levelCombatPower}}</div>
    <div v-if="cardObj" class="_card_name">{{ cardObj.heroName }}</div>
    <span v-if="!cardObj">{{$t('union.pledge')}}</span>
  </div>
</template>
<script setup>
    const props = defineProps({
        cardObj:{}
    })
</script>
<style lang="scss" scoped>
.active_card {
  height: 82px;
  width: 57px;
  position: relative;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 9px;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  ._card_xx {
    width: 18px;
    height: 8px;
    border-radius: 13px;
    background-color: rgba(0, 0, 0, 0.79);
    position: absolute;
    right: 2px;
    top: 2px;
    font-size: 5px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  ._card_zl {
    width: 50%;
    height: 8px;
    border-radius: 13px;
    background-color: rgba(0, 0, 0, 0.79);
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    font-size: 5px;
    white-space: nowrap;
    justify-content: center;
    color: #FFB522;
  }
  ._card_name {
    width: 50%;
    height: 8px;
    border-radius: 13px;
    background-color: rgba(0, 0, 0, 0.79);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 70%;
    display: flex;
    align-items: center;
    font-size: 6px;
    justify-content: center;
  }
}
.no_active {
  width: 57px;
  height: 82px;
  background: url("@/assets/UpgradeUnion/kk.png") no-repeat center;
  background-size: cover;
  line-height: 82px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 9px;
}
</style>
